<!--
 * @Author: ChunLai
 * @Date: 2023-08-07 17:11:30
 * @LastEditTime: 2025-11-21 09:29:48
 * @Description: 实名认证弹窗
 * @FilePath: \01.latest-short-insure\src\views\sign\components\SelfValidatePop.vue
-->
<template>
  <van-popup
    v-model="show"
    overlay-class="lay1_shark"
    position="bottom"
    round
    :close-on-click-overlay="false"
    :style="{ backgroundColor: '#fff' }"
    sticky
  >
    <div class="pop_main_mode">
      <div class="pop_tt">人脸识别</div>
      <div class="li_el">
        <div class="li_el_l">姓名</div>
        <div class="li_el_v">{{ userMsg.name }}</div>
      </div>
      <div class="li_el" v-if="userMsg.idNum">
        <div class="li_el_l">证件号</div>
        <div class="li_el_v">{{ userMsg.idNum }}</div>
      </div>
      <div class="li_el" v-if="userMsg.certificate">
        <div class="li_el_l">执业证号</div>
        <div class="li_el_v">{{ userMsg.certificate }}</div>
      </div>
      <div class="mode4">请拍摄五官正面照</div>
      <div class="mode_p">
        请在安静且光线充足环境下确保正脸对准屏幕框；请勿佩戴帽子和墨镜，需露出耳朵。
      </div>
      <div class="mt14">
        <img :src="`${imgUrlPath}/img/facebg.png`" alt="" />
      </div>
      <div class="mode_p">
        本人同意民盛保险代理有限公司采集本人人脸信息，用于确认本人对本次投保内容清晰并进行签字，用于向国家法规许可的验证机构进行本人身份验证。
      </div>
      <div class="mode5_btn">
        <span @click="goValidSelf" v-if="tengxunValid">我是本人开始验证</span>
        <!-- 非身份证:自拍照 -->
        <van-uploader
          :after-read="afterRead"
          capture="camera"
          accept="image/*"
          v-else
        >
          我是本人开始认证
        </van-uploader>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { mapGetters } from "vuex";
import { rebackUrlPath } from "@/methods/format.js";
export default {
  name: "SelfValidatePop",
  data() {
    return {
      show: false,
    };
  },
  components: {},
  computed: {
    ...mapGetters({
      insured: "insert/assured",
      applicant: "insert/applicant",
      agentInfo: "agent/agentInfo",
      userObj: "filesign/userObj",
      userType: "filesign/userType",
    }),
    userMsg() {
      let res = {};
      res = this.userObj;
      return res;
    },
    tengxunValid() {
      let res = false;
      if (["1", "2"].includes(this.userType) && this.userMsg.idType === "0") {
        res = true;
      }
      return res;
    },
  },
  created() {},
  mounted() {},
  methods: {
    initModule() {
      this.show = true;
    },
    // 实名验证/腾讯云实人认证
    goValidSelf() {
      let params = {
        ...this.apiComParams,
        name: this.userMsg.name,
        idNum: this.userMsg.idNum,
        type: "tb",
      };
      let returnUrl = encodeURIComponent(`${rebackUrlPath()}`);
      if (!params.idNum || !params.orderNum) return;
      this.$store
        .dispatch("apis/comConfigApi", {
          apiParams: params,
          apiName: "initFaceVerify",
        })
        .then((data) => {
          if (data.optimalDomain) {
            let url = `https://${data.optimalDomain}/api/web/login?webankAppId=${data.webankAppId}&version=1.0.0&nonce=${data.nonce}&orderNo=${data.orderNo}&h5faceId=${data.h5faceId}&url=${returnUrl}&from=browser&userId=${data.userId}&sign=${data.sign}&redirectType=1`;
            window.location.href = url;
          } else {
            this.$toast(data.msg);
          }
        });
    },
    successBack() {
      this.show = false;
    },
    afterRead(file) {
      if (file.file.size > 300000) {
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        let img = new Image();
        img.src = file.content;
        img.onload = () => {
          const whRatio = img.width / img.height;
          const nw = 750;
          const nh = Math.ceil(nw / whRatio);
          canvas.width = nw;
          canvas.height = nh;
          context.drawImage(img, 0, 0, nw, nh);
          file.content = canvas.toDataURL(file.file.type, 0.92);
          this.getImgOssUrl(file.content);
        };
      } else {
        this.getImgOssUrl(file.content);
      }
    },
    getImgOssUrl(imgBase) {
      let pic_base64 = imgBase
        .replace(new RegExp("image/jpeg", ""), "image/jpg")
        .replace(new RegExp("image/png", ""), "image/jpg");
      let params = {
        data: pic_base64,
      };
      this.$store.commit("updateLoadTxt", "正在上传，请稍后...");
      this.$store
        .dispatch("apis/comAliYunApi", {
          apiParams: params,
          apiName: "fileUpload",
        })
        .then((res) => {
          this.saveImgInfo(res.url);
        });
    },
    saveImgInfo(picUrl) {
      let params = {
        ...this.apiComParams,
        photo: picUrl,
        name: this.userMsg.name || "",
        idNum: this.userMsg.idNum || "",
        type: "tb",
      };
      this.$store
        .dispatch("apis/comConfigApi", {
          apiParams: params,
          apiName: "saveFacePhoto",
        })
        .then((data) => {
          if (data.code == "1") {
            this.successBack();
          } else {
            this.$baseAlert(data.msg);
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.pop_main_mode {
  color: #242424;
  padding: 20px 12px 10px;

  .pop_tt {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 20px;
  }

  .li_el {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .mode4 {
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin-top: 30px;
  }

  .mode_p {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #666666;
    margin-top: 10px;
  }

  .mode5_btn {
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    border-radius: 20px;
    background: linear-gradient(90deg, #ff442b 0%, #cb1800 100%);
    margin-top: 20px;
  }
}
</style>
